<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>敏感词管理页面</title>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/bootstrap/bootstrap.min.css">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/bootstrap/bootstrap-theme.min.css">
    <script src="/bootstrap/jquery-1.11.0.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/bootstrap/bootstrap.min.js"></script>
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
</head>
<style type="text/css">
    jsp, body {
        overflow: auto;
        height: 100%;
    }

    .line-limit-length {
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


</style>
<script>

</script>
<body>
<div id="app">
    <div class="hrms_dept_container">
        <!-- 导航栏-->
        <!--<%@ include file="../../jsp/commom/head.jsp"%>-->
        <div id="header"></div>


        <!-- 中间部分（左侧栏+表格内容） -->
        <div class="hrms_dept_body">
            <!-- 左侧栏 -->
            <!--<%@ include file="../../jsp/commom/leftsidebar.jsp"%>-->
            <div id="leftsidebar"></div>
            <!-- 表格内容 -->
            <div class="dept_info col-sm-10">
                <div class="panel panel-success">
                    <!-- 路径导航 -->
                    <div>
                        <ol class="breadcrumb">
                            <li><a href="#">用户帖管理</a></li>
                            <li class="active">敏感词汇管理</li>
                        </ol>
                    </div>
                    <button class="btn btn-primary" @click="formVisible=true;word={}">新增敏感词</button>
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>敏感词</th>
                            <th>是否启用</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!--<c:forEach items="${wordMsgs.list}" var="word" varStatus="index">-->
                        <tr v-for="word,index in tableData">
                            <td width="10%">{{index+1}}</td>
                            <td width="50%" class="line-limit-length">{{word.word}}</td>
                            <td width="10%">
                                <!--{{word.status}}-->
                                <div v-if="word.status==0">
                                    使用中
                                </div>
                                <div v-if="word.status==1">
                                    已停用
                                </div>

                            </td>
                            <td width="20%">
                                <div v-if="word.status==0" @click="update(word.wordid,word.status)">
                                    <div
                                            role="button" class="btn btn-danger">停用
                                    </div>
                                </div>
                                <div v-if="word.status==1" @click="update(word.wordid,word.status)">
                                    <div
                                            role="button" class="btn btn-primary">启用
                                    </div>
                                </div>

                            </td>
                        </tr>
                        <!--</c:forEach>-->
                        </tbody>
                    </table>


                </div><!-- /.panel panel-success -->
                <!--显示分页信息-->
                <div class="row">
                    <!--文字信息-->
                    <div class="col-md-6">
                        当前第 {{pageNum}} 页.总共 {{pages}} 页.一共 {{total}} 条记录
                    </div>

                    <!--点击分页-->
                    <div class="col-md-6">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <!--首页-->
                                <li><a @click="searchWord(1)">首页</a></li>
                                <!--上一页-->
                                <li>
                                    <a @click="searchWord(page-1)" aria-label="Previous">
                                        <span aria-hidden="true">上一页</span>
                                    </a>
                                </li>

                                <li v-for="index in pages">
                                    <a @click="searchWord(index)">{{index}}</a>
                                </li>

                                <!--v-if="index=={{page}}?'active':''}"-->
                                <!--<c:forEach items="${wordMsgs.navigatepageNums}" var="page_num">-->
                                <!--<c:if test="${page_num == wordMsgs.pageNum}">-->
                                <!--<li class="active"><a href="#">${page_num}</a></li>-->
                                <!--</c:if>-->
                                <!--<c:if test="${page_num != wordMsgs.pageNum}">-->
                                <!--<li><a href="#" onclick="searchWord('${page_num}')">${page_num}</a></li>-->
                                <!--</c:if>-->
                                <!--</c:forEach>-->

                                <!--下一页-->
                                <li>
                                    <a @click="searchWord(page+1)"
                                       aria-label="Next">
                                        <span aria-hidden="true">下一页</span>
                                    </a>
                                </li>
                                <li><a @click="searchWord(pages)">尾页</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div><!-- /.dept_info -->
            <!-- 尾部-->
            <!--<%@ include file="../../jsp/commom/foot.jsp"%>-->
            <div id="footer"></div>
        </div><!-- /.hrms_dept_body -->

    </div><!-- /.hrms_dept_container -->
    <div class="add-form">
        <!--弹出窗口-->
        <el-dialog  title="编辑" :visible.sync="formVisible" >
            <el-form label-width="80px">

                <el-form-item label="敏感词"><el-input v-model="word.word"></el-input></el-form-item>
                <el-form-item label="状态,启用是1,不起用时0"><el-input v-model="word.status"></el-input></el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="save()">保存</el-button>
                    <el-button @click="formVisible = false" >关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</div>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                formVisible: false,//控制新增样式展示
                word:{},
                tableData: [],
                page: 1,//当前页
                total: 0,//中记录数
                pageNum: 0,//当前页
                pages: 0//中共页
            }
        },
        created() {
            this.findPage();
        },
        methods: {
            findPage() {
                axios.get(`/word/findByPage.do?page=${this.page}`).then(response => {
                    this.total = response.data.total;
                    this.tableData = response.data.rows;
                    this.pageNum = response.data.pageNum;
                    this.pages = response.data.pages;
                })
            },
            searchWord(home) {
                if (home <= 1) {
                    home = 1;
                }
                if (home > this.pages) {
                    home = this.pages;
                }
                axios.get(`/word/findByPage.do?page=${home}`).then(response => {
                    this.total = response.data.total;
                    this.tableData = response.data.rows;
                    this.pageNum = response.data.pageNum;
                    this.pages = response.data.pages;
                })
            },
            update(wordid, status) {
                if (status == 0) {
                    status = 1;
                }else if(status == 1){
                    status = 0;
                }

                axios.get(`/word/update.do?wordid=${wordid}&status=${status}`).then(response=>{
                    this.findPage();
                })
            },
            save(){
                axios.post(`/word/insert.do`,this.word).then(response=>{
                    this.formVisible= false;
                    this.findPage();
                })
            }
        }


    })


</script>
</body>
</html>
